<template>
    <div class="all-container">
        <a-row>
            <a-col :xs="0" :sm="0" :md="0" :lg="0" :xl="6" :xxl="4">
                <div class="left-row">
                    <div class="left-container">
                        <a-card class="left-card">
                            <template #title>
                                <div>
                                    <a-button type="primary" long @click="toEdit">写文章</a-button>
                                </div>
                            </template>
                            <div class="left-card-menu">
                                <a-menu :style="{ width: '200px', }" v-model:selected-keys="currentPath"
                                    :default-selected-keys="['personalHome']" @menu-item-click="changeMenu"
                                    auto-open>
                                    <a-menu-item key="personalHome">
                                        <template #icon>
                                            <icon-home />
                                        </template>
                                        <div class="menu-title">首页</div>
                                    </a-menu-item>
                                    <a-sub-menu key="content">
                                        <template #icon><icon-apps /></template>
                                        <template #title>
                                            <div class="menu-title">内容管理</div>
                                        </template>
                                        <a-menu-item key="articleHome">文章管理</a-menu-item>
                                        <a-menu-item key="resourceHome">资源管理</a-menu-item>
                                        <a-menu-item key="commentHome">心得管理</a-menu-item>
                                    </a-sub-menu>
                                    <!-- <a-sub-menu key="2">
                                        <template #icon><icon-computer /></template>
                                        <template #title>
                                            <div class="menu-title">数据中心</div>
                                        </template>
                                        <a-menu-item key="2_0">内容数据</a-menu-item>
                                        <a-menu-item key="2_1">个人数据</a-menu-item>
                                    </a-sub-menu>
                                    <a-sub-menu key="3">
                                        <template #icon><icon-question-circle /></template>
                                        <template #title>
                                            <div class="menu-title">帮助中心</div>
                                        </template>
                                        <a-menu-item key="3_0">常见问题</a-menu-item>
                                    </a-sub-menu> -->
                                </a-menu>
                            </div>
                        </a-card>
                    </div>
                </div>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18" :xxl="14">
                <router-view></router-view>
            </a-col>
            <a-col :xs="0" :sm="0" :md="0" :lg="0" :xl="0" :xxl="0">

            </a-col>
        </a-row>

    </div>
</template>

<script>
import { ref, watch } from 'vue';
import { Message } from '@arco-design/web-vue';
import {
    IconMenuFold,
    IconMenuUnfold,
    IconApps,
    IconBug,
    IconBulb,
    IconHome,
    IconComputer,
    IconQuestionCircle,
} from '@arco-design/web-vue/es/icon';
import { userStore } from '@/store/userStore';
import { useRouter } from 'vue-router';
export default {
    components: {
        IconMenuFold,
        IconMenuUnfold,
        IconApps,
        IconBug,
        IconBulb,
        IconHome,
        IconComputer,
        IconQuestionCircle
    },
    setup() {
        const router = useRouter()
        const currentPath = ref([router.currentRoute.value.name]);
        watch(() => router.currentRoute.value.name,
            (newValue, oldValue) => {
                currentPath.value[0] = newValue
            },
            { immediate: true });

        const user = userStore()
        const changeMenu = (key) => {
            const path = '/personal/' + key
            router.push(path)
        }
        const toEdit = () => {
            router.push('/editor/drafts')
        }
        return {
            user,
            changeMenu,
            currentPath,
            toEdit
        };
    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
/deep/.arco-card-body {
    height: inherit;
}


.left-row {
    position: relative;
}

.all-container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.left-container {
    border-radius: 4px;
    position: fixed;
    max-width: 220px;
    top: 6rem;
    bottom: 0;
    overflow: hidden;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 0 6rem;

    .menu-title {
        font-size: 16px;
    }

    .left-card {
        width: inherit;
        // height: calc(100% - 195px);
        height: 100%;

    }

    .left-card-menu {
        width: inherit;
        overflow: auto;
        height: 100%;

    }
}
</style>